<template>
  <div id="app">
    <HelloWorld @chengshi="onlonde" />
    <Content :tq_list="TianQi" />
    <TianqiList :tiganwendu="TianQi.tiganwendu"
                :jianshui="TianQi.jiangshuiliang"
                :city="TianQi.city"
                :weilaitq="weilaitq" />
    <Con></Con>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import Content from './components/content.vue'
import TianqiList from './components/tianqiList.vue'
import Con from './components/con_2.vue'

import axios from 'axios'

export default {
  name: 'app',
  components: {
    HelloWorld,
    Content,
    TianqiList,
    Con,
  },
  data () {
    return {
      TianQi: {
        timer: '',
        city: '',    //地区
        tmpNew: '',      //温度
        briefNew: '',     //天气情况
        jiangshuiliang: '',  //降水量
        tiganwendu: ''    //空气质量
      },
      weilaitq: {},
    }
  },
  created () {
    this.getdata();
  },
  methods: {
    // 获取当前位置的经纬度
    getdata () {
      var data = {
        key: 'QT5BZ-RAG64-MZSUT-DBPVO-AYZC6-3JFZB' // 这个key就是你申请的**
      }
      //腾讯位置服务接口
      var url = 'https://apis.map.qq.com/ws/location/v1/ip' // 这个就是地理位置信息的接口
      data.output = 'jsonp'
      this.$jsonp(url, data)
        .then(res => {
          // console.log(res.result.ad_info.city, 123)
          this.TianQi.city = res.result.ad_info.city
        })
        .catch(error => {
          console.log(error, 456)
        })
    },
    //获取地区天气情况
    onlonde: async function (srkVlue) {
      // console.log(csVlue)
      if (!srkVlue == null || !srkVlue == '') {
        this.TianQi.city = srkVlue
      }

      axios.get('https://v0.yiketianqi.com/api?version=v61&appid=76918367&appsecret=I2wk7vzV&city=' + this.TianQi.city)
        .then((res) => {
          console.log(res.data.errmsg, this.TianQi.city, 222)
          if (res.data.errmsg) {
            this.$message({
              showClose: true,
              message: '请输入正确的地区或城市！！！',
              type: 'error'
            });
            console.log(res.data)
          } else {
            this.TianQi.timer = res.data.date
            this.TianQi.briefNew = res.data.wea
            this.TianQi.tmpNew = res.data.tem
            this.TianQi.tiganwendu = res.data.air_level
            this.TianQi.jiangshuiliang = res.data.win_speed
          }
        }).catch((err) => {
          console.log(err)
        })
      //获取7天天气信息
      // console.log(this.TianQi.city, `《城市`)
      axios.get('https://v0.yiketianqi.com/api?version=v9&appid=76918367&appsecret=I2wk7vzV&city=' + this.TianQi.city)
        .then((res) => {
          this.weilaitq = res.data
          console.log(this.weilaitq.data, this.TianQi.city, `《城市`)

        }).catch((err) => {
          console.log(err)
        })
    },


  },
  mounted () {
    this.onlonde()
  }
}
</script>

<style>
html,
body,
div,
ol,
ul,
li,
a,
b,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  padding: 0;
  margin: 0;
  border: 0;
}
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  /* -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; */
  /* text-align: center; */
  color: #2c3e50;
  /* margin-top: 60px; */
  width: 100vw;
  height: 100vh;
  /* background-color: #000066; */
}
</style>
